<template>
    <div> 
        <home-header></home-header>
        <home-swiper :swiperList="swiperList"></home-swiper>
        <home-icons :iconList="iconList"></home-icons>
        <home-recommend :recommendList="recommendList"></home-recommend>
        <home-weekend :weekendList="weekendList"></home-weekend>
    </div>
</template>
<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/icons'
import HomeRecommend from './components/recommend'
import HomeWeekend from './components/weekend'
import axios from 'axios'
import Vuex,{ mapState } from 'vuex'
export default {
   name: 'Home',
   components:{
       HomeHeader,
       HomeSwiper,
       HomeIcons,
       HomeRecommend,
       HomeWeekend
   },
   data(){
       return{
           lastCity:'',
           swiperList:[],
           iconList:[],
           recommendList:[],
           weekendList:[]
           
       }
   },
   computed:{
       ...mapState(['city'])
   },
   methods:{
       geiHomeInfo(){
           axios.get('/api/index.json?city=' + this.city)
            .then(this.geiHomeInfoSucc)
       },
       geiHomeInfoSucc(res){
           res=res.data
           if(res.ret && res.data){
               this.swiperList=res.data.swiperList
               this.iconList=res.data.iconList
               this.recommendList=res.data.recommendList
               this.weekendList=res.data.weekendList
           }
       }
   },
   mounted (){
       this.lastCity = this.city
       this.geiHomeInfo()
   },
   activated () {
      if(this.lastCity !== this.city){
          this.lastCity = this.city
          this.geiHomeInfo()
      }
   }
}
</script>
<style>

</style>
